<template>
  <cmj-container flexDirection="column">
    <cmj-header :title="title" @handleOut="loginOut" admin-name="管理员" :lock-pwd="pwd" src="http://wish.zjwhhly.com/mobile-newspaper/logo.png">
      <div class="home-redis">
        <div class="home-redis-state" :style="{background:redisState?'#67C23A':'#F56C6C'}"></div>
        <span class="home-last-time">最后一次更新时间：{{ lastUpTime }}</span>
        <el-button size="mini" round @click="onClickUpdate()">更新数据</el-button>
      </div>
    </cmj-header>
    <cmj-container>
      <cmj-aside>
        <cmj-menu :menu-list="menuList" @handleJump="RouterJump" color="#009688"></cmj-menu>
      </cmj-aside>
      <cmj-main style="background: #f9f9f9;width: calc(100% - 235px);">
        <cmj-tabs :tabs-list="tabsList" ref="listBox" @change="changeTabs">
          <router-view @openAdd="openAdd" @changeList="getList" :columnList="columnList" :userList="userList" :clientHeight="clientHeight"></router-view>
        </cmj-tabs>
      </cmj-main>
    </cmj-container>
  </cmj-container>
</template>

<script>
    export default {
      name: "Home",
      data(){
        return{
          title:'浙里好玩后台',
          tabsList:[],
          menuList:[
            {tit:'文章管理',icon:'template',bag:0,children:[
                {tit:'待处理文章',icon:'shengyijing',bag:0,route:'/zlhwReadyList'},
                {tit:'文章列表',icon:'Menu',route:'/zlhwList'},
                {tit:'新增文章',icon:'suggest',route:'/addArticle/0'}
              ]},
            {tit:'设置',icon:'fencengpeizhi',children:[
              {tit:'栏目设置',icon:'signboard',route:'/columnList'},
              {tit:'供应商设置',icon:'Copy',route:'/userList'},
              {tit:'白名单设置',icon:'Customermanagement-fill',route:'/whiteList'}
            ]}
          ],
          columnList:[],
          userList:[],
          clientHeight:'0px',
          redisState:1,//缓存状态
          lastUpTime:''//最后一次更新时间
        }
      },
      created(){
        this.getList();
        this.getRedisState();
        this.tabsList = JSON.parse(sessionStorage.getItem('tabsList'));
      },
      computed:{
        pwd(){
          return sessionStorage.getItem('pwd');
        }
      },
      mounted(){
        this.clientHeight = this.$refs['listBox']._vnode.elm.offsetHeight - 40 - 308;
        //屏幕尺寸缩放
        window.onresize = () => {
          return (() => {
            this.clientHeight = this.$refs['listBox']._vnode.elm.offsetHeight - 40 - 308;
          })();
        };
      },
      methods:{
        //获取缓存状态
        getRedisState(){
          this.$axios.getRedisState().then((res)=>{
            this.redisState = res.data.redisState;
            this.lastUpTime = res.data.lastUpTime;
          })
        },
        //点击更新数据
        onClickUpdate(){
          this.$axios.upDataHome({
            '1':1
          }).then((res)=>{
            this.getRedisState();
            this.$message.success('更新成功');
          })
        },
        //标签发生改变
        changeTabs(list){
          this.tabsList = list;
          sessionStorage.setItem('tabsList',JSON.stringify(this.tabsList));
        },
        RouterJump(c){
          if(!c) return;
          this.tabsList.some((v,index)=>{
            if(v.route==c.route){
              this.$router.push({path:c.route});
              return true;
            }
            if(index==this.tabsList.length-1){
              this.tabsList.push(c);
              this.$router.push({path:c.route});
              sessionStorage.setItem('tabsList',JSON.stringify(this.tabsList));
            }
          })
        },
        //登出
        loginOut(){
          sessionStorage.clear();
          this.$router.push('/Login');
        },

        //当打开新页面时新增标签
        openAdd(newList){
          this.tabsList = newList;
          sessionStorage.setItem('tabsList',JSON.stringify(newList));
        },


        //获取栏目、供应商列表
        getList(){
          this.$axios.getColumnList().then(res=>{
            if (res.data.code==='0'){
              this.columnList = res.data.data;
            }else{
              this.$message.error('获取栏目列表失败！');
            }
          }).then(()=>{
            this.$axios.getUser().then(res=>{
              if (res.data.code==='0'){
                this.userList = res.data.data;
                let t = setTimeout(()=>{
                  this.clientHeight = this.$refs['listBox']._vnode.elm.offsetHeight - 40 - 308 + 'px';
                  this.loading = false;
                  clearTimeout(t);
                },500)
              }else{
                this.$message.error('获取供应商列表失败');
              }
            })
          }).then(()=>{
            this.$axios.getNewsByState({
              "useState":"2"
            }).then((res)=>{
              if (res.data.code==='1') return;
              this.menuList[0].bag = res.data.msg;
              this.menuList[0].children[0].bag = res.data.msg;
              this.$notify({
                title: '待处理文章',
                message: `还有${res.data.msg}条文章待处理`,
                position: 'bottom-right'
              });
            })
          })
        }
      }
    }
</script>

<style scoped>
  .home-redis{
    width: 350px;
    height: 100%;
    position: relative;
    float: right;
  }
  .home-redis-state{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #67C23A;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .home-last-time{
    line-height: 50px;
    margin:0 10px 0 20px;
    font-size: 12px;
  }
</style>



// WEBPACK FOOTER //
// src/page/Home.vue